<template>
  <div class="jiayi-container news">
    <Header/>
    <div class="main">
      <div class="main_header">
        <el-tabs v-model="queryParams.typeId" @tab-click="getNews">
          <el-tab-pane v-for="type in newsMenuList" :label="type.name" :name="type.id.toString()"/>
        </el-tabs>
        <el-input placeholder="请输入内容" v-model="queryParams.name" clearable :class="isEmptyArr(newsList) ? 'mt_query_input_empty' : ''">
          <el-button slot="append" icon="el-icon-search" @click="getNews(queryParams.typeId)"></el-button>
        </el-input>
      </div>
      <div class="main_list flex1">
        <div v-if="isEmptyArr(newsList)" style="padding-top: 6rem;width: 100%">
          <el-skeleton :rows="6"/>
          <el-empty :image="expectImage">
            <template slot="description">&nbsp;</template>
          </el-empty>
          <el-skeleton :rows="6"/>
        </div>
        <div v-for="news in newsList" class="main_list-item" @click="handleChoiceNews(news)">
          <div class="poster">
            <el-image :src="news.poster"/>
          </div>
          <div class="info_date">
            <div class="info flex1">
              <div class="title">{{ news.name }}</div>
              <div class="info_text">
                {{ news.remark }}
              </div>
            </div>
            <div class="date">
              <span class="type_name">{{ news.typeDTO.name }}</span>
              <span class="date_font">{{ news.date }}</span>
            </div>
          </div>
        </div>
        <div class="product_list-page">
          <pagination v-show="total>0" :total="total" :page.sync="queryParams.pageNum"
                      :limit.sync="queryParams.pageSize" @pagination="getNews(this.typeId)"
                      layout="prev, pager, next,total"/>
        </div>
      </div>
    </div>
    <div class="call_me">
      <Call_me/>
    </div>
  </div>
</template>

<script>

import Call_me from "@/views/jiayi/call_me_sub";
import Header from "@/views/jiayi/header";
import {get_news_list, get_newsMenu} from "@/api"
import {isEmptyArr} from "@/utils/zzDouUtils/arrayUtil";
import {decodeBase64, encodeBase64, isNotEmpty} from "@/utils/zzDouUtils/objUtil";


export default {
  name: "Jiayi_news",
  components: {Call_me,Header},
  computed: {},
  data() {
    return {
      doc: {},
      queryParams: {
        pageSize: 8,
        pageNum: 1,
        typeId: null,
        name: null,
      },
      newsMenuList: [],
      typeId: null,
      newsList: [],
      total: 0,
      expectImage: require("@/assets/images/expect.png")
    };
  },
  beforeRouteUpdate(to, from, next) {
    this.init();
    next();
  },
  created() {
    this.getNewsMenu();
    this.init();
  },
  methods: {
    init(){
      this.$nextTick(() => {
        let query = this.$route.query;
        if (isNotEmpty(query)){
          this.queryParams.typeId = decodeBase64(query.j);
        }
        this.getNews();
      })
    },
    getNewsMenu(){
      get_newsMenu().then(response=>{
        this.newsMenuList = response.data;
      })
    },
    isEmptyArr,
    getNews() {
      get_news_list(this.queryParams).then(response => {
        this.newsList = response.data;
        this.total = response.total;
      })
    },
    handleChoiceNews(row) {
      this.$router.push({path: '/news/info',query:{ j :encodeBase64(row.id)}})
    }
  }
};
</script>

<style scoped>
.news {
  width: 100vw;
  height: auto;
  padding-top: 7vh;
  overflow-x: hidden;
  overflow-y: auto;
}

.main {
  width: 80%;
  min-height: 60vh;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  justify-content: start;
  align-items: center;
}

.main_header {
  width: 80%;
  height: 5vh;
  display: flex;
  flex-direction: row;
  justify-content: space-around;
  align-items: center;
}

.main_header .el-tabs {
  width: 60%;
}

.main_header .el-input {
  width: 35%;
}

.main_list {
  width: 80%;
  overflow: hidden auto;
  display: flex;
  flex-direction: column;
  justify-content: start;
  align-items: center;
}

.main_list-item {
  width: 90%;
  height: 20vh;
  margin: 1rem 0 0.5rem 0;
  border-bottom: 1px solid #67C23A;
  padding: 1rem 0.5rem 1rem 0.5rem;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  cursor: pointer;
}

.main_list-item .poster {
  width: 30%;
  height: 100%;
}

.main_list-item .poster .el-image {
  width: 100%;
  height: 100%;
}

.main_list-item .info_date {
  width: 65%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
}

.main_list-item :hover {
  color: #409EFF;
  text-decoration: underline;
  text-decoration-color: #409EFF;
}

.main_list-item .info_date .info {
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
}

.main_list-item .info_date .info .title {
  width: 100%;
  height: 3.4rem;
  text-align: left;
  font-size: 1.3rem;
  font-weight: bold;
  overflow: hidden;
}

.main_list-item .info_date .info .info_text {
  flex: 1;
  color: #909399;
  font-size: 0.85rem;
  padding: 1rem 0;
  text-overflow: ellipsis;
}

.main_list-item .info_date .date {
  width: 100%;
  height: 13%;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}

.main_list-item .info_date .date .type_name {
  font-weight: bold;
}

.main_list-item .info_date .date .date_font {
  font-weight: 450;
  font-size: 0.95rem;
}

.product_list-page {
  width: 90%;
  height: 5%;
  text-align: right;
}


.call_me {
  margin-top: 4%;
  width: 100%;
  background: #E4E7ED;
}

/*------- 响应式布局 -------*/
/* 手机（小屏幕） */
@media (width <= 992px) {
  html {
    font-size: 14px;
  }

  .main {
    width: 100%;
    overflow: hidden auto;
  }

  .main_header {
    width: 100%;
    height: auto;
    flex-direction: column;
    justify-content: start;
  }

  .main_header .el-tabs {
    width: 95%;
  }

  .main_header .el-input {
    width: 95%;
  }
  .main_header .mt_query_input_empty {
    display: none;
  }

  .main_list {
    width: 100%;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    justify-content: start;
    align-items: center;
  }

  .main_list-item {
    width: 95%;
    height: 17vh;
  }
  .main_list-item .poster {
    width: 30%;
    height: 100%;
  }

  .main_list-item .info_date .info .info_text {
    flex: 1;
    display: inline-block;
    white-space: nowrap;
    width: 100%;
    overflow: hidden;
    text-overflow:ellipsis;
  }
}

/* 平板 */
@media (width > 992px) and (width < 1200px) {
  html {
    font-size: 12px;
  }
}

@media (width > 992px) {

}

</style>
